@()(implicit request: RequestHeader)
@main("系统发育树(SNP)")("phyTree") {

	<link rel="stylesheet" media="screen" href="@routes.Assets.at("phylotree.js-master/phylotree.css")">
	<script src="@routes.Assets.at("javascripts/d3.min.js")" type="text/javascript"></script>
	<script src="@routes.Assets.at("phylotree.js-master/phylotree.js")" type="text/javascript"></script>
	<script src="@routes.Assets.at("javascripts/underscore.min.js")" type="text/javascript"></script>
	<style>

			.fa-rotate-135 {
				-webkit-transform: rotate(135deg);
				-moz-transform: rotate(135deg);
				-ms-transform: rotate(135deg);
				-o-transform: rotate(135deg);
				transform: rotate(135deg);
			}

			.fa-rotate-45 {
				-webkit-transform: rotate(45deg);
				-moz-transform: rotate(45deg);
				-ms-transform: rotate(45deg);
				-o-transform: rotate(45deg);
				transform: rotate(45deg);
			}

			.myGroup {
				margin-top: 15px;
				margin-left: 15px;
			}

	</style>

	<div class="page-content">

		<div class="page-bar">
			<ul class="page-breadcrumb">
				<li>
					<i class="fa fa "></i>
					<a href="">系统发育树(SNP)</a>
				</li>
			</ul>
		</div>


		<div class="row-fluid">
			<div class="row">
				<div class="col-md-12 col-sm-12">
					<div class="portlet blue-madison box">
						<div class="portlet-title">
							<div class="caption">
								系统发育树(SNP)
							</div>
						</div>

						<div class="portlet-body">

							<form class="registration-form form-horizontal" id="form"
							accept-charset="UTF-8" method="post">

								<div class="form-group">
									<label class="control-label col-sm-2">任务名:</label>
									<div class="col-sm-3">
										<input class="form-control" name="missionName" onfocus="inputSelect(this)">
										<span class="help-block"><a href="@routes.ToolController.downloadExampleFile()?fileName=phyTree_example.zip"><em id="egQuery">
											example file</em></a></span>
									</div>


								</div>

								<div class="form-group">
									<label class="control-label col-sm-2">参考样品文件（*.fa,*.fasta）:</label>
									<div class="col-sm-8">
										<input id="sampleFile" type="file" class="file" name="refSampleFile" data-show-preview="false"
										data-show-upload="false" accept=".fa,.fasta" >
									</div>
								</div>

								<div class="form-group">
									<label class="control-label col-sm-2">其他样品文件（*.fa,*.fasta,）:</label>
									<div class="col-sm-8">
										<input id="sampleFiles" type="file" class="file" name="sampleFiles" data-show-preview="false"
										data-show-upload="false" accept=".fa,.fasta," multiple>
									</div>
								</div>

								<div class="form-group">
									<div class="actions col-sm-offset-2 col-sm-2">
										<button type="button" class="btn btn-primary" style="width: 90%;" id="search" onclick="PhyTree.myRun">
											运行</button>
									</div>
								</div>

							</form>


						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="row-fluid">
			<div class="row">
				<div class="col-md-12 col-sm-12">
					<div class="portlet blue-madison box">
						<div class="portlet-title">
							<div class="caption">
								分析结果
							</div>
						</div>

						<div class="portlet-body">

							<div class="table-responsive">

								<table class="display table table-bordered" id="missionTable" data-pagination="true" data-search="true"
								data-toolbar="#toolbar" data-page-list="[5, 10, all]" data-page-size="5" data-multiple-search="true">
									<thead>
										<tr>
											<th data-field="missionName" data-sortable="true">任务名</th>
											<th data-field="args" data-sortable="true" data-formatter="genome.argsFmt">
												参数</th>
											<th data-field="state" data-sortable="true"
											data-formatter="Genome.stateFmt"
											>状态</th>
											<th data-field="startTime" data-sortable="true">开始时间</th>
											<th data-field="endTime" data-sortable="true">结束时间</th>
											<th data-field="operate" data-formatter="genome.operateFmt">操作</th>
										</tr>
									</thead>
								</table>

							</div>


						</div>
					</div>
				</div>
			</div>

		</div>

		<div class="row-fluid" id="result" style="display: none">
			<div class="row">
				<div class="col-md-12 col-sm-12">
					<div class="portlet blue-madison box">
						<div class="portlet-title">
							<div class="caption" id="missionResult">
								系统发育树结果展示(<span id="missionName"></span>)
							</div>
						</div>

						<div class="portlet-body">

							<div id="download" style="margin-top: 10px">
								下载无根树SVG文件:
								<a href="javascript:downloadFile('tree.root.svg')" style='cursor: pointer;'><span><em class='fa fa-download'></em></span></a>
							</div>
							<div id="download" style="margin-top: 10px">
								下载有根树SVG文件:
								<a href="javascript:downloadFile('tree.svg')" style='cursor: pointer;'><span><em class='fa fa-download'></em></span></a>
							</div>
							<div id="download" style="margin-top: 10px">
								下载newick树文件:
								<a href="javascript:downloadFile('tree.newick')" style='cursor: pointer;'><span><em class='fa fa-download'></em></span></a>
							</div>

							<div style="border: 1px solid #ccc;
								margin-top: 10px">
								<div>
									<div class="btn-group myGroup">
										<button type="button" class="btn btn-default btn-sm" data-direction="vertical" data-amount="1" title="Expand vertical spacing">
											<i class="fa fa-arrows-v"></i>
										</button>
										<button type="button" class="btn btn-default btn-sm" data-direction="vertical" data-amount="-1" title="Compress vertical spacing">
											<i class="fa  fa-compress fa-rotate-135"></i>
										</button>
										<button id="leftRight" type="button" class="btn btn-default btn-sm" data-direction="horizontal" data-amount="1" title="Expand horizonal spacing">
											<i class="fa fa-arrows-h"></i>
										</button>
										<button type="button" class="btn btn-default btn-sm" data-direction="horizontal" data-amount="-1" title="Compress horizonal spacing">
											<i class="fa  fa-compress fa-rotate-45"></i>
										</button>
										<button type="button" class="btn btn-default btn-sm" id="sort_ascending" title="Sort deepest clades to the bototm">
											<i class="fa fa-sort-amount-asc"></i>
										</button>
										<button type="button" class="btn btn-default btn-sm" id="sort_descending" title="Sort deepsest clades to the top">
											<i class="fa fa-sort-amount-desc"></i>
										</button>
										<button type="button" class="btn btn-default btn-sm" id="sort_original" title="Restore original order">
											<i class="fa fa-sort"></i>
										</button>
										<button type="button" class="btn btn-default btn-sm" title="Reset tree" onclick="refreshTree()">
											<i class="fa fa-refresh"></i>
										</button>

									</div>
									<div class="btn-group myGroup" data-toggle="buttons">
										<label class="btn btn-default btn-sm active" id="linear">
											<input name="options" class="phylotree-layout-mode" data-mode="linear" autocomplete="off" checked="" title="Layout left-to-right" type="radio">
											Linear
										</label>
										<label class="btn btn-default  btn-sm">
											<input name="options" class="phylotree-layout-mode" data-mode="radial" autocomplete="off" title="Layout radially" type="radio">
											Radial
										</label>
									</div>
									<div class="btn-group myGroup" data-toggle="buttons">
										<label class="btn btn-default active btn-sm" id="defaultAlign">
											<input class="phylotree-align-toggler" data-align="left" name="options-align" autocomplete="off" checked="" title="Align tips labels to branches" type="radio">
											<i class="fa fa-align-left"></i>
										</label>
										<label class="btn btn-default btn-sm">
											<input class="phylotree-align-toggler" data-align="right" name="options-align" autocomplete="off" title="Align tips labels to the edge of the plot" type="radio">
											<i class="fa fa-align-right"></i>

										</label>
									</div>
								</div>

								<svg id="tree_display" xmlns='http://www.w3.org/2000/svg' xmlns:xlink="http://www.w3.org/1999/xlink"></svg>
							</div>

						</div>
					</div>
				</div>
			</div>

		</div>

	</div>

	<script>
			var originalHtml = ""
			var kind = "phyTree"
			var treeData
			var tree

			Tool.fileInput

			$(function () {

				PhyTree.init

				var wsUri = "ws://" + window.location.host +"@routes.GenomeController.updateMissionSocket("phyTree")"
				genome.testWebSocket(wsUri);

				originalHtml = $("#tableContent").html()

				$("#sort_original").on("click", function (e) {
					tree.resort_children(function (a, b) {
						return a["original_child_order"] - b["original_child_order"];
					});
				});

				$("#sort_ascending").on("click", function (e) {
					sort_nodes(true);
				});

				$("#sort_descending").on("click", function (e) {
					sort_nodes(false);
				});

				$(".phylotree-layout-mode").on("change", function (e) {
					if ($(this).is(':checked')) {
						if (tree.radial() != ($(this).data("mode") == "radial")) {
							tree.radial(!tree.radial()).placenodes().update();
						}
					}
				});

				$("[data-direction]").on("click", function (e) {
					var which_function = $(this).data("direction") == 'vertical' ? tree.spacing_x : tree.spacing_y;
					which_function(which_function() + (+$(this).data("amount"))).update();
				});

				$(".phylotree-align-toggler").on("change", function (e) {
					if ($(this).is(':checked')) {
						if (tree.align_tips($(this).data("align") == "right")) {
							tree.placenodes().update();
						}
					}
				});
			})

			function mySubmit() {
				var html = $("svg:first").prop("outerHTML")
				$("#svgHtml").val(html)
				return true
			}

			function sort_nodes(asc) {
				tree.traverse_and_compute(function (n) {
					var d = 1;
					if (n.children && n.children.length) {
						d += d3.max(n.children, function (d) {
							return d["count_depth"];
						});
					}
					n["count_depth"] = d;
				});
				tree.resort_children(function (a, b) {
					return (a["count_depth"] - b["count_depth"]) * (asc ? 1 : -1);
				});
			}

			function refreshTree() {
				var example_tree = treeData
				tree = d3.layout.phylotree()
						.svg(d3.select("#tree_display")).radial(false)
				tree.spacing_x(25, true)
				tree.spacing_y(250, true)
				tree(example_tree)
						.layout()

			}

			function showResult(id, missionName) {
				$("#missionName").text(missionName)
				showId = id
				var index = layer.load(1, {
					shade: [0.1, '#fff']
				});
				$.ajax({
					url: "@routes.GenomeController.phyTreeResult()?missionId=" + id,
					type: "get",
					dataType: "json",
					success: function (data) {
						layer.close(index)
						$("label").removeClass("active")
						$("#defaultAlign,#linear").addClass("active")
						$("#treeOut").html(data.tree)
						treeData = data.tree
						refreshTree()
						$("#treeContent").show()
						$("#charts").hide()
						$("#result").show()
						var target_top = $("#missionResult").offset().top
						$("html,body").animate({scrollTop: target_top}, 800)
					}
				})
			}

	</script>


}
